/* * @Author: gpj * @Date: 2023-06-10 10:31:20 * @LastEditors: Yejing * @LastEditTime: 2023-06-24 16:39:58 *
@Description: desc */
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="search.title" :navType="search.navType" :navPlaceholder="search.navPlaceholder"
				:navThmen="search.navThmen"></c-navigation-bar>

			<!-- 修改 -->
			<view class="container-box form-modify">
				<u-form ref="uForm">
					<u-form-item :label="$t('user.givenName')" labelPosition="top" prop="name">
						<u-input v-model="personalStep1.firstName" disabled placeholder="" />
					</u-form-item>
					<u-form-item :label="$t('user.surname')" labelPosition="top" prop="name">
						<u-input v-model="personalStep1.name" disabled placeholder="" />
					</u-form-item>

					<u-form-item :label="$t('storeManagement.Telephone')" labelPosition="top">
						<view class="" style="margin-right: 20rpx;">
							+{{personalStep1.phoneCountryCode}}
						</view>
						<u-input v-model="personalStep1.phone" disabled placeholder="" />
					</u-form-item>
					<!-- 验证码 -->
					<u-form-item v-if="personalStep1.phoneCode" :label="$t('storeManagement.TelephoneCode')" labelPosition="top"
						prop="phoneCode">
						<u-input v-model="personalStep1.phoneCode" disabled type="number" placeholder="" :maxlength="6" />


					</u-form-item>

					<!-- 	<view class="Uploadproduct p-b-6">
						<text class="p-b-6">{{ $t('storeManagement.CertificateUpload') }}</text>
						<view class="uploaddiv">
							<u-icon style="margin: auto" name="plus" size="40" v-if="personalStep1.shopCoverUrl.length == 0"></u-icon>
							<u-image
								v-else
								width="296rpx"
								height="296rpx"
								v-for="(item, key) in personalStep1.shopCoverUrl"
								:src="shopStatus !== 0 && shopStatus !== -1 && shopStatus !== 3 && shopStatus !== 1 ? item : $u.file.getMedieUrl(item)"
								:key="key"
							></u-image>
						</view>
					</view> -->
					<view class="" style="margin: 30rpx 0">{{ $t('user.documentType') }}</view>
					<uni-data-checkbox selectedColor="#2934D0" disabled v-model="personalStep1.documentType"
						:localdata="certificate"></uni-data-checkbox>
					<!-- 身份证 -->
					<view class="upload" v-if="personalStep1.documentType == '2'">
						<view class="file">
							<view class="info">
								<u-image v-if="personalStep1.cardFrontUrl" width="100%" height="100%"
									:src="$u.file.getMedieUrl(personalStep1.cardFrontUrl)"></u-image>
								<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
							</view>
							<view class="hint">{{ $t('user.UploadFront') }}</view>
						</view>
						<view class="file mb">
							<view class="info">
								<u-image v-if="personalStep1.cardTheBackUrl" width="100%" height="100%"
									:src="$u.file.getMedieUrl(personalStep1.cardTheBackUrl)"></u-image>
								<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
							</view>
							<view class="hint">{{ $t('user.UploadBack') }}</view>
						</view>
					</view>
					<!-- 护照 -->
					<view class="upload" v-else>
						<view class="file mb">
							<view class="info">
								<u-image v-if="personalStep1.photoUrl" width="100%" height="100%"
									:src="$u.file.getMedieUrl(personalStep1.photoUrl)"></u-image>
								<u-image v-else width="48rpx" height="48rpx" src="@/static/images/upBlock.png"></u-image>
							</view>
							<view class="hint">{{ $t('user.passportFront') }}</view>
						</view>
					</view>
					<u-form-item :label="$t('storeManagement.StoreName')" labelPosition="top">
						<u-input v-model="personalStep2.shopName" disabled placeholder="" />
					</u-form-item>
					<u-form-item :label="$t('storeManagement.ShopAvatar')" labelPosition="top">
						<u-avatar :src="
								 $u.file.getMedieUrl(personalStep2.shopAvatarUrl)
							" disabled mode="square" size="200"></u-avatar>
					</u-form-item>
					<u-form-item :label="$t('storeManagement.ShopProfile')" labelPosition="top">
						<u-input v-model="personalStep2.profile" disabled placeholder="" />
					</u-form-item>

					<!-- <u-form-item :label="$t('storeManagement.BusinessType')"  labelPosition="top">
						<view class="check-store-type">
							<view class="check-btn"
							:class="personalStep2.businessType === index+1? 'choosedcss':''"
								v-for="item in businessTypeList" :key="item">
								{{item}}
							</view>
						</view>
					</u-form-item> -->

					<u-form-item :label="$t('storeManagement.ShopIntroduction')" labelPosition="top">
						<u-input v-model="personalStep2.intro" disabled placeholder="" />
					</u-form-item>
					<u-form-item :label="$t('storeManagement.BusinessAddress')" labelPosition="top">
						<u-input v-model="personalStep2.shopAddress" disabled placeholder="" />
					</u-form-item>

					<u-form-item :label="$t('storeManagement.workingScenario')" labelPosition="top">
						<view class="check-store-type">
							<view class="check-btn" v-for="(item, index) in scenarioList"
								:class="personalStep2.workScene === index + 1 ? 'choosedcss' : ''" :key="index">
								{{ item }}
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>

			<view class="bootom">
				<u-button :loading="isloading" @click="modifyClick" type="primary" v-if="shopStatus == 0 || shopStatus == -1">
					{{ $t('system.Submit') }}
				</u-button>
				<u-button type="primary" v-else disabled
					style="background: #999999 !important">{{ $t('storeManagement.UnderReview') }}…</u-button>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				scenarioList: [this.$t('storeManagement.homeOffice'), this.$t('storeManagement.smallStudio'), this.$t(
					'storeManagement.company')],
				shopStatus: '',
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('storeManagement.previewFillingInformation')
				},
				certificate: [{
						text: this.$t('user.identityCard'),
						value: '2'
					},
					{
						text: this.$t('user.passport'),
						value: '1'
					}
				],
				// 数据
				personalStep1: {
					firstName: '',
					name: '',
					phone: '',
					phoneCode: '',
					cardFrontUrl: '',
					cardTheBackUrl: '',
					documentType: '2',
					photoUrl: '',
					phoneCountryCode: 1,
				},
				// 数据
				personalStep2: {
					shopName: '',
					shopAvatarUrl: '',
					profile: '',
					intro: '',
					shopAddress: '',
					workScene: null
				},
				businessTypeList: ['Personal', 'Partner', 'Flagship', 'Enterprise'],
				activeStoreType: 'Personal'
			};
		},
		onLoad() {

			// this.personalStep1=uni.getStorageSync('personalStep1')
			// this.personalStep2=uni.getStorageSync('personalStep2')
			// console.log(11111,this.personalStep1);
			// console.log(22222,this.personalStep2);

		},
		methods: {
			modifyClick() {
				this.isloading = true
				let data = { ...this.personalStep1, ...this.personalStep2 };




				this.$u.post('/app/shop', data).then((res) => {
					this.$u.toast(this.$t('storeManagement.applicationSuccess'));
					setTimeout(() => {
						this.isloading = false
						uni.switchTab({
							url: '/pages/user/user',
							animationType: 'slide-in-bottom	',
							animationDuration: 200
						});
					}, 700);
				}).catch(() => {
					this.isloading = false
				});

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			let that = this;
			this.$u.get('/app/shop').then((res) => {
				if (res.data && Number(res.data.status) !== 0 && Number(res.data.status) !== -1 && Number(res.data
						.status) !== 3) {
					this.shopStatus = Number(res.data.status);
					console.log(5757);
					that.personalStep1 = {
						firstName: res.data.firstName,
						name: res.data.name,
						phone: res.data.phone,
						phoneCountryCode: res.data.phoneCountryCode,
						cardFrontUrl: res.data.cardFrontUrl,
						cardTheBackUrl: res.data.cardTheBackUrl,
						documentType: String(res.data.documentType),
						photoUrl: res.data.photoUrl,
					};
					that.personalStep2 = {
						shopName: res.data.shopName,
						shopAvatarUrl: res.data.shopAvatarUrl,
						intro: res.data.intro,
						shopAddress: res.data.shopAddress,
						profile: res.data.profile,
						workScene: Number(res.data.workScene),
						businessType: res.data.businessType == '1' ? 'Personal' : res.data.businessType == '2' ? 'Partner' :
							res.data.businessType == '3' ? 'Flagship' : 'Enterprise'
					};
					console.log(that.$u.file.getMedieUrl(that.personalStep2.shopAvatarUrl));
					console.log(99999, that.personalStep2);
					return false;
				} else {
					that.personalStep1 = JSON.parse(uni.getStorageSync('personalStep1')) ? JSON.parse(uni.getStorageSync(
						'personalStep1')) : that.personalStep1;
					that.personalStep2 = JSON.parse(uni.getStorageSync('personalStep2')) ? JSON.parse(uni.getStorageSync(
						'personalStep2')) : that.personalStep2;
				}
				console.log(8888888, this.shopStatus);
			});
		}
	};
</script>

<style lang="scss">
	.modify-page {
		.input-box {
			margin-bottom: 40rpx;
		}

		.container-box {
			height: 80vh;
			overflow: auto;
			padding: 30rpx;
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}

		.p-b-6 {
			padding-bottom: 60rpx;
			width: 100%;
			margin-top: 48rpx;
			display: inline-block;
		}

		.uploaddiv {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-radius: 20rpx;
			text-align: center;
			opacity: 1;
			min-height: 396rpx;
			border: 1px solid #e8e6ea;
		}
	}

	// 店铺类型
	.check-store-type {
		display: flex;
		margin-top: 50rpx;
		flex-wrap: wrap;

		.check-btn {
			width: 90px;
			height: 32px;
			background: #f5f6f8;
			border-radius: 10px 10px 10px 10px;
			line-height: 32px;
			font-size: 12px;
			margin: 20rpx;
			color: #c9c9c9;
			text-align: center;
			opacity: 1;

			&:not(:last-child) {
				margin-right: 20rpx;
			}

			&.is-active {
				color: #fff;
				background-color: #2935d0;
			}
		}
	}

	/deep/.choosedcss {
		background-color: #2935d0 !important;
		color: #fff !important;
	}

	.upload {
		display: flex;
		justify-content: center;
		margin: 20px 0;

		.file {
			width: 324rpx;
			margin-right: 20rpx;

			.info {
				width: 324rpx;
				height: 160rpx;
				background: #e1e4e8;
				border-radius: 8rpx 8rpx 0rpx 0rpx;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
			}

			.hint {
				width: 324rpx;
				height: 52rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				color: #fff;
				text-align: center;
				line-height: 52rpx;
				font-size: 28rpx;
			}
		}
	}
</style>